<template>
  <div class="flex align-items-center flex-wrap">
    <template v-for="(item, i) in items">
      <el-divider v-if="i !== 0" :key="item.id" direction="vertical" />
      <strong v-if="isActive(item.id)" :key="item.id">{{ item.title }}</strong>
      <router-link
        v-else
        :key="item.id"
        :to="initItemPath(item)"
        class="link el-link--primary nowrap"
        v-text="item.title"
      />
    </template>
  </div>
</template>

<script>
export default {
  name: 'DividerNav', // 分割线样式的导航
  props: {
    items: {
      type: Array,
      required: true,
    },
    queryKey: {
      type: String,
      required: true,
    },
  },
  methods: {
    isActive(itemId) {
      const activeItem = this.$route.query[this.queryKey];
      const activeItemId = Number(activeItem);
      if (!itemId && !activeItem) return true; // ‘全部’类型没有id
      return itemId === activeItem || itemId === activeItemId;
    },
    initItemPath(tag) {
      const queryChange = { [this.queryKey]: tag.id, page: undefined };
      return {
        path: this.$route.path,
        query: Object.assign({}, this.$route.query, queryChange),
      };
    },
  },
};
</script>

<style></style>
